<template>
    <div class="wrapper">
        <v-head></v-head>
        <v-sidebar style="width：40px"></v-sidebar>
        <div class="content" :class="{'active':menuOut}">
            <!--面包屑导航-->
            <div class="breadcrumb">
                <div class="menu-btn" :class="{'active':menuOut}" @click="COM_MENU_TOGGLE()">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconfont-edu12"></use>
                    </svg>
                </div>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{path:'/Welcome'}" v-show="$route.path!='/Welcome'">首页</el-breadcrumb-item>
                    <el-breadcrumb-item v-for="(item,index) in $route.matched" :to="{path:item.path}" :key="index">{{item.name}}</el-breadcrumb-item>
                    <!-- <el-breadcrumb-item>活动列表</el-breadcrumb-item> -->
                </el-breadcrumb>
            </div>
            <transition name="move" mode="out-in">
                <router-view></router-view>
            </transition>
        </div>
    </div>
</template>

<script>
import vHead from "./Header.vue";
import vSidebar from "./Sidebar.vue";
import { mapGetters, mapMutations } from "vuex";
export default {
	components: {
		vHead,
		vSidebar
	},
	data() {
		return {
			// menuOut:false
		};
	},
	computed: {
		...mapGetters(["menuOut"])
	},
	mounted() {},
	methods: {
		...mapMutations(["COM_MENU_TOGGLE"])
	}
};
</script>
<style lang="scss">
.content {
	background: none repeat scroll 0 0 #fff;
	position: absolute;
	left: 180px;
	right: 0;
	top: 60px;
	bottom: 0;
	padding: 10px 20px;
	box-sizing: border-box;
	overflow-y: scroll;
	transition: 0.5s all;
	.breadcrumb {
		display: flex;
		align-items: center;
		.menu-btn {
			float: left;
			font-size: 30px;
			margin-right: 10px;
			cursor: pointer;
			transition: 0.5s all;
			&.active {
				transform: rotate(90deg);
			}
		}
	}

	&.active {
		left: 40px;
	}
}
</style>
